<style lang="scss" type="stylesheet/scss" scoped>
</style>

<template>
  <div>
    <as-title>写在前面</as-title>
    <as-content>
      从开始想写个自己的组件库到现在已经快一年的时间了，最近有空抽出点时间看了 <a href="https://element.eleme.cn">element-ui</a> 的源码，跟着业界大佬学习了一番组件库的实践。在此过程中收益良多，包括代码的规范，命名的规范，到 vue 的高级用法、scss 的高级用法、组件化思想的再次升级，以及 js 的高级用法。
    </as-content>
    <as-content>
      组件库取名叫 {{$vars.uiName}}，希望他能与我想象中一样完美。是一款基于 VUE 开发的一款适配 PC 端组件库。
    </as-content>
    <as-title>安装</as-title>
    <as-code :text="install"></as-code>
    <as-title>引入</as-title>
    <as-content>注意：样式文件需要单独引入</as-content>
    <as-code :text="intro"></as-code>
    <as-title>开始使用</as-title>
    <as-content>现在，你可以使用 {{$vars.uiName}} 来搭建你的页面了。各个组件的使用方法请阅读组件文档</as-content>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {
      install: "npm install awosome-ui -S",
      intro: `import Vue from 'vue';
 import App from './App.vue';
 
 import ASUI from 'awosome-ui';
 import "awosome-ui/package/theme/index.css";
 Vue.use(ASUI);
 
 new Vue({
     el: '#app',
     render: h => h(App)
 });`
    };
  }
};
</script>
